.learn-stages {
  padding-top: 10px;

  .categ > h2 {
    @extend %roboto;

    font-size: 2em;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #999;
    text-shadow: $text-shadow;
    text-align: center;
  }

  .categ_stages {
    --min-width: 100vw;

    @include breakpoint($mq-xx-small) {
      --min-width: 400px;
    }

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
    grid-gap: 1em;
    margin: 0.8em 0 3em 0;
  }

  .stage {
    @extend %box-radius, %flex-center-nowrap;

    @include transition;

    position: relative;
    height: 90px;
    color: #fff;
    margin-top: 13px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    font-size: 1.2em;

    img {
      width: 80px;
      height: 80px;
      margin: 0 13px;
      opacity: 0.9;
    }

    h3 {
      font-size: 2em;
      letter-spacing: 3px;
      margin: 0 0 1px -1px;
    }

    h3 {
      font-size: 1.6em;
      letter-spacing: 2px;
    }

    &.vvv h3 {
      font-size: 1.4em;
      letter-spacing: 1px;
    }

    p {
      margin: 0;
    }

    @keyframes soft-bright {
      50% {
        filter: brightness(0.97);
      }
    }

    &.ongoing {
      background: $c-primary;
      filter: brightness(0.9);
      animation: 1.7s soft-bright ease-in-out infinite;
    }

    &.ongoing:hover {
      filter: brightness(1.2);
    }

    &.done {
      background: $c-secondary;
    }

    &.future {
      opacity: 0.7;
      background: $c-accent;
    }

    &.future img {
      opacity: 0.7;
    }

    &.active,
    &:hover {
      filter: brightness(1.08);
      transform: scale(1.02);
      opacity: 1;
    }

    .ribbon-wrapper {
      display: block;
      width: 85px;
      height: 88px;
      overflow: hidden;
      position: absolute;
      top: -3px;
      right: -3px;
    }
  }

  .ribbon {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    color: #6a6340;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);

    i {
      color: $c-brag;
      animation: 0.6s soft-hue ease-in-out infinite;
      text-shadow: 0 -0.5px 1px rgba(0, 0, 0, 0.5);
    }

    i:nth-child(2) {
      animation-delay: 0.2s;
    }

    i:nth-child(3) {
      animation-delay: 0.4s;
    }

    &:before,
    &:after {
      content: '';
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      bottom: -3px;
    }

    &:before {
      left: 0;
    }

    &:after {
      right: 0;
    }

    &.done {
      background-color: #bfdc7a;
    }

    &.done:before,
    &.done:after {
      border-top: 3px solid #6e8900;
    }

    &.ongoing {
      background-color: #b3e5fc;
    }

    &.ongoing:before,
    &.ongoing:after {
      border-top: 3px solid #536dfe;
    }
  }

  .what_next > p {
    @extend %page-text-shadow !optional;
    width: 100%;
    text-align: center;
    margin: 20px 0;
    font-size: 1.2em;
  }
}
